<template>
	<view class="myOrders">
		<view class="search">
			<view class="search_container">
				<image class="search_icon" src="/static/pages/image/search_icon.png" mode="widthFix"></image>
				<input class="search_input" placeholder="请输入搜索内容" placeholder-style="color: #ACACAC;">
			</view>
		</view>
		<view class="order_nav">
			<view v-for="(item, index) in nav_list" :key="index" class="nav_item" :data-id="item.id"
				@tap="onChangeActive">
				<text class="item_txt">{{item.lab}}</text>
				<view class="item_line" :style="'background:' + (item.id == isActive ? '#1EB9A6' : '#ffffff')"></view>
			</view>
		</view>
		<view class="order_list">
			<view v-for="(item, index) in order_list" :key="index" class="order_item" key="index">
				<view class="item_head">
					<view class="head_left">
						<image class="head_avatar" :src="item.shop_member_image"></image>
						<text class="head_name">{{item.shop_member_name}}</text>
						<image class="head_icon" src="/static/pages/image/area_right.png"></image>
					</view>
					<view class="head_right">
						<view class="completed">
							<text class="txt">{{item.add_time}}</text>
						</view>
					</view>
				</view>
				<view class="item_content">
					<image class="content_img" :src="getImage(item.image)"></image>
					<view class="item_container">
						<text class="content_title">{{item.title}}</text>
						<text class="content_address">{{item.area}}{{item.address}}</text>

						<view class="content_footer">
							<text class="content_address" style="margin-right: 5upx;">{{item.parm.name}}</text>
							<text class="content_address">数量✖️{{item.sum}}</text>
							<view class="content_money">
								<!-- <text class="money_symbol">¥</text>
                            <text class="money_txt">{{filter.getPriceIntegr(item.pay_amount)}}</text>
                            <text class="money_decimal">.{{filter.getPriceDecimals(item.pay_amount)}}</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="item_footer">
					<view class="footer_left">
						<view class="left_money">
							<text class="money_symbol">¥</text>
							<text class="money_txt">{{filter.getPriceIntegr(item.pay_amount)}}</text>
							<text class="money_decimal">.{{filter.getPriceDecimals(item.pay_amount)}}</text>
						</view>
					</view>
					<view class="footer_right" v-if="item.pay_status == 1">
						<button class="right_btn del_btn" :data-id="item.id" @tap="onRemindShip(item)">提醒发货</button>
						<!-- <button class="right_btn del_btn" :data-id="item.id" @tap="onRefund">申请退款</button> -->
					</view>
					<view class="footer_right" v-if="item.pay_status == 2">

						<button class="right_btn shipments_btn " @click="onReceiving(item.id)">确认收货</button>
					</view>
					<view class="footer_right" v-if="item.pay_status == 3">
						<button class="right_btn del_btn" @tap="delOrder(item.id)">删除订单</button>
						<!-- <button class="right_btn del_btn" :data-id="item.id" @tap="lookLogistics">查看物流</button> -->
						<!-- <button class="right_btn shipments_btn" :data-id="item.id" @tap="onReceiving">确认收货</button> -->
						<view>
							<button v-if="item.is_comment == 0" class="right_btn shipments_btn" :data-id="item.id"
								@tap="qrsh(item.id)">评价</button>
							<view v-else></view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<load-more :load="load" @onMore="onMore"></load-more>
	</view>
</template>

<script module="filter" lang="wxs" src="../../we7/resource/js/tools.wxs"></script>

<script>
	var app = getApp();
	import loadMore from "../../components/load-more/load-more";

	export default {
		data() {
			return {
				order_list: [],
				isActive: 1,
				pageNum: 1,
				nav_list: [{
					id: 1,
					lab: '待发货'
				}, {
					id: 2,
					lab: '已发货'
				}, {
					id: 3,
					lab: '已完成'
				}, {
					id: 4,
					lab: '全部'
				}],
				// loading noMore more
				load: 'noMore'
			};
		},

		components: {
			loadMore
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.status) this.isActive = options.status
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				load: 'more',
				pageNum: 1,
				order_list: []
			});
			this.getOrderlist();
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			onRemindShip(item) {
				this.onReceipt(item.id)
			},
			getImage(images) {
				return JSON.parse(images)[0]
			},
			// 发货提醒
			onReceipt(id) {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "member.index.isremindgoodsorder",
						id
					},
					success: res => {
						if(res.data.errno == 0){
							const message = this.$tim.createCustomMessage({
								// to: this.toUserInfo.id,
								to: item.goods_uid,
								conversationType: 'C2C',
								payload: {
									data: 'RemindShip', // 用于标识该消息类型
									description: JSON.stringify(item),
									extension: ""
								}
							});
							this.$tim.sendMessage(message)
							this.setData({
								pageNum: 1,
								order_list: []
							});
							this.getOrderlist();
						}
					}
				});
			},

			// 申请退款
			onRefund(event) {
				const id = event.currentTarget.dataset['id'];
			},

			// 删除订单
			delOrder(id) {
			
			},

			// 查看物流
			lookLogistics(event) {
				const id = event.currentTarget.dataset['id'];
			},
			//评价
			qrsh(event) {
				console.log(event);
				uni.navigateTo({
					url: '/pagesA/pjpage/pjpage?id=' + event
				})
			},

			// 收货
			onReceiving(id) {
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "member.index.member_pay_status",
						uid: wx.getStorageSync('uid'),
						id: id,
						pay_status: 3
					},
					success: res => {
						this.setData({
							pageNum: 1,
							order_list: []
						});
						wx.hideLoading();
						this.getOrderlist();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},

			onMore() {
				if (this.load != 'more') return;
				this.getOrderlist();
			},

			// 改变选中
			onChangeActive(event) {
				const id = event.currentTarget.dataset['id'];
				this.setData({
					isActive: id,
					pageNum: 1,
					order_list: []
				});
				this.getOrderlist();
			},

			getOrderlist() {
				this.setData({
					load: 'loading'
				});
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "member.index.member_orderlist",
						uid: wx.getStorageSync('uid'),
						pay_status: this.isActive == 4 ? '' : this.isActive,
						leftid: this.pageNum
					},
					success: res => {
						let {
							order_list
						} = this;
						let load = 'more';
						if (res.data.data.length < 6) load = 'noMore';
						this.setData({
							load,
							pageNum: this.pageNum + 1,
							order_list: order_list.concat(res.data.data)
						});
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			}

		}
	};
</script>
<style>
	@import "./myOrders.css";
</style>
